<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'map'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section-title">当前组件使用了墨渊底图样式，查看<onekit-navigator onekit-class="navigator" url="/page/component/pages/map-styles/map-styles">查看更多</onekit-navigator>。</onekit-view>
		<onekit-view onekit-class="page-section page-section-gap">
			<onekit-map onekit-style="width: 100%; height: 300px;" :subkey="subKey" :latitude="latitude" :longitude="longitude" :scale="18" :markers="markers" :covers="covers" :enable-3D="enable3d" :show-compass="showCompass" :enable-zoom="enableZoom" :enable-rotate="enableRotate" :enable-satellite="enableSatellite" :enable-traffic="enableTraffic" :enable-overlooking="enableOverlooking" :enable-scroll="enableScroll" :polygons="drawPolygon?polygons:[]"></onekit-map>
		</onekit-view>
	</onekit-view>
	<onekit-view onekit-class="page-section">
		<onekit-view onekit-class="btn-area">
			<onekit-button @Tap="toggle3d">{{ !enable3d ? '启用' : '关闭'}}3D效果</onekit-button>
			<onekit-button @Tap="toggleShowCompass">{{ !showCompass ? '显示' : '关闭' }}指南针</onekit-button>
			<onekit-button @Tap="toggleOverlooking">{{ !enableOverlooking ? '开启' : '关闭' }}俯视支持</onekit-button>
			<onekit-button @Tap="toggleRotate">{{ !enableRotate ? '开启' : '关闭' }}旋转支持</onekit-button>
			<onekit-button @Tap="togglePolygon">{{ !drawPolygon ? '绘制' : '清除' }}多边形</onekit-button>
			<onekit-button @Tap="toggleZoom">{{ !enableZoom ? '开启' : '关闭' }}缩放支持</onekit-button>
			<onekit-button @Tap="toggleScroll">{{ !enableScroll ? '开启' : '关闭' }}拖动支持</onekit-button>
			<onekit-button @Tap="toggleSatellite">{{ !enableSatellite ? '开启' : '关闭' }}卫星图</onekit-button>
			<onekit-button @Tap="toggleTraffic">{{ !enableTraffic ? '开启' : '关闭' }}实时路况</onekit-button>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "map",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["subKey","latitude","longitude","markers","covers","enable3d","showCompass","enableZoom","enableRotate","enableSatellite","enableTraffic","enableOverlooking","enableScroll","drawPolygon","polygons","3D效果","指南针","俯视支持","旋转支持","多边形","缩放支持","拖动支持","卫星图","实时路况"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'map',
        "path":'page/component/pages/map/map'
};
    },
    "data":{
        "latitude":23.099994,
        "longitude":113.32452,
        "markers":[
          {
              "latitude":23.099994,
              "longitude":113.32452,
              "name":'T.I.T 创意园'
}
        ],
        "covers":[
          {
              "latitude":23.099994,
              "longitude":113.34452,
              "iconPath":'/image/location.png'
},
          {
              "latitude":23.099994,
              "longitude":113.30452,
              "iconPath":'/image/location.png'
}
        ],
        "polygons":[
          {
              "points":[
                {
                    "latitude":23.099994,
                    "longitude":113.32452
},
                {
                    "latitude":23.098994,
                    "longitude":113.32352
},
                {
                    "latitude":23.098994,
                    "longitude":113.32552
}
              ],
              "strokeWidth":3,
              "strokeColor":'#FFFFFFAA'
}
        ],
        "subKey":'B5QBZ-7JTLU-DSSVA-2BRJ3-TNXLF-2TBR7',
        "enable3d":false,
        "showCompass":false,
        "enableOverlooking":false,
        "enableZoom":true,
        "enableScroll":true,
        "enableRotate":false,
        "drawPolygon":false,
        "enableSatellite":false,
        "enableTraffic":false
},
    "toggle3d"(){
      this.setData({
        "enable3d":!this.data.enable3d
});
    },
    "toggleShowCompass"(){
      this.setData({
        "showCompass":!this.data.showCompass
});
    },
    "toggleOverlooking"(){
      this.setData({
        "enableOverlooking":!this.data.enableOverlooking
});
    },
    "toggleZoom"(){
      this.setData({
        "enableZoom":!this.data.enableZoom
});
    },
    "toggleScroll"(){
      this.setData({
        "enableScroll":!this.data.enableScroll
});
    },
    "toggleRotate"(){
      this.setData({
        "enableRotate":!this.data.enableRotate
});
    },
    "togglePolygon"(){
      this.setData({
        "drawPolygon":!this.data.drawPolygon
});
    },
    "toggleSatellite"(){
      this.setData({
        "enableSatellite":!this.data.enableSatellite
});
    },
    "toggleTraffic"(){
      this.setData({
        "enableTraffic":!this.data.enableTraffic
});
    }
});

</script>
<style 
 lang="css">
.page-section-title {
  margin-bottom: 15px ;
}
.navigator {
  color: var(--weui-LINK) ;
  display: inline-block ;
}
</style>